<template>
  <div class="container">
    <div class="left-box">
      <div class="search">
        <input
          type="text"
          placeholder="Search"
          v-model="keyword"
          @input="searchFun"
        />
      </div>
      <ul class="filter-ul">
        <li @click="filterFun('all')" :class="{ libg: filterWord == 'all' }">
          <span :class="{ 'filter-text': filterWord == 'all' }">所有</span>
          <span class="num">{{ incompleteNum }}</span>
        </li>
        <li
          @click="filterFun('today')"
          :class="{ libg: filterWord == 'today' }"
        >
          <span :class="{ 'filter-text': filterWord == 'today' }">今天</span>
          <span class="num">{{ incompleteAndTodyNum }}</span>
        </li>
        <li @click="filterFun('week')" :class="{ libg: filterWord == 'week' }">
          <span :class="{ 'filter-text': filterWord == 'week' }">最近7天</span>
          <span class="num">{{ incompleteAndWeekNum }}</span>
        </li>
      </ul>
      <ul class="grop-ul">
        <li
          v-for="item in group"
          :key="item.id"
          @dblclick="toggleDom(item)"
          @click="filterFun('group', item)"
          :class="{ libg: filterWord == 'group' && item.id == selectGroupId }"
        >
          <input
            type="text"
            v-myfocus
            v-if="item == editing"
            v-model="item.gname"
            @blur="editing = null"
          />
          <span
            :class="{
              'filter-text': filterWord == 'group' && item.id == selectGroupId,
            }"
            v-else
            >{{ item.gname }}</span
          >
          <span class="num">{{ getGroupTodoNum(item.id) }}</span>
        </li>

        <li class="new-list" @click="addGroup">+ 新建列表</li>
      </ul>
    </div>
    <div class="right-box">
      <div class="right-header">
        <h2>{{ rightTile }}</h2>
        <button @click="toggleComputed">
          {{ isShowComputed ? '隐藏已完成' : '显示已完成' }}
        </button>
        <button @click="clearComputed">清理已完成</button>
      </div>
      <div class="right-list">
        <div
          class="list-row"
          v-for="(item, index) in filterData"
          :key="item.id"
        >
          <div
            class="dui"
            @click="updateStatus(item)"
            :style="getLevelColor(item.level)"
          >
            {{ item.complated ? '✓' : '' }}
          </div>
          <input
            class="row-con"
            :class="{ del: item.complated }"
            v-model="item.content"
          />
          <div class="row-action">
            <select
              name=""
              id=""
              @change="updateLevel(item)"
              v-model="item.level"
            >
              <option selected value="1">★</option>
              <option value="2">★★</option>
              <option value="3">★★★</option>
            </select>
            <button @click="del(index)">删除</button>
          </div>
          <div class="row-date">{{ item.date }}</div>
        </div>
      </div>
      <div class="right-footer">
        <span>+</span>
        <input
          type="text"
          v-model="newTodo"
          @keydown.13="addTodo"
          name=""
          placeholder="请输入~"
          class="add-todo"
        />
      </div>
    </div>
  </div>
</template>

<script>
function getTodayDate() {
  let date = new Date()
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
    2,
    '0'
  )}-${date.getDate()}`
}
const filterObject = {
  all: (todoList) => {
    return todoList
  },
  today: (todoList) => {
    console.log(getTodayDate())
    return todoList.filter((item) => item.date === getTodayDate())
  },
  week: (todoList) => {
    return todoList.filter(
      (item) =>
        new Date(item.date).getTime() >
        new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000).getTime()
    )
  },
  hide: (todoList) => {
    return todoList.filter((item) => !item.complated)
  },
  group: (todoList, id) => {
    return todoList.filter((v) => v.group === id)
  },
}
//怎么去计算时间范围 首先知道当前时间戳 -7 *24 *60*60*1000
export default {
  data() {
    return {
      editing: null,
      rightTile: '所有',
      newTodo: '',
      isShowComputed: true,
      filterWord: 'all', //all -所有 today -今天 week -最近7天
      todoList: [],
      keyword: '',
      autoId: 3,
      groupId: 2,
      group: [],
      selectGroupId: 0,
    }
  },
  directives: {
    myfocus: {
      inserted(el) {
        el.focus()
      },
    },
  },
  computed: {
    filterData() {
      let data = filterObject[this.filterWord](
        this.todoList,
        this.selectGroupId
      )
      if (this.keyword.trim()) {
        data = data.filter((item) => item.content.includes(this.keyword))
      } else {
        //判断isShowComputed
        if (!this.isShowComputed) {
          data = data.filter((item) => !item.complated)
        }
      }
      data.sort((a, b) => a.complated - b.complated)
      return data
    },
    incompleteNum() {
      return this.todoList.filter((item) => !item.complated).length
    },
    incompleteAndTodyNum() {
      return this.todoList.filter(
        (item) => !item.complated && item.date === getTodayDate()
      ).length
    },
    incompleteAndWeekNum() {
      return this.todoList.filter(
        (item) =>
          !item.complated &&
          new Date(item.date).getTime() >
            new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000).getTime()
      ).length
    },
  },
  watch: {
    group: {
      handler(newVal, oldVal) {
        let index = newVal.findIndex((v) => v.id === this.selectGroupId)
        if (index > -1) {
          this.rightTile = newVal[index].gname
        }

        localStorage.setItem('group', JSON.stringify(newVal))
      },
      deep: true,
    },
    autoId(newVal) {
      localStorage.setItem('autoId', newVal)
    },
    groupId(newVal) {
      localStorage.setItem('groupId', newVal)
    },
    todoList: {
      handler(newVal) {
        localStorage.setItem('todoList', JSON.stringify(newVal))
      },
      deep: true,
    },
  },
  mounted() {
    let autoId = localStorage.getItem('autoId')
    this.autoId = autoId || 1
    let groupId = localStorage.getItem('groupId')
    this.groupId = groupId || 1
    let todoList = localStorage.getItem('todoList')
    if (todoList != null) {
      this.todoList = JSON.parse(todoList)
    }
    let group = localStorage.getItem('group')
    if (group != null) {
      this.group = JSON.parse(group)
    }
  },
  methods: {
    getGroupTodoNum(groupId) {
      return this.todoList.filter(
        (item) => item.group == groupId && !item.complated
      ).length
    },
    addGroup() {
      this.group.push({
        id: this.groupId++,
        gname: '待办事项',
      })
    },
    toggleDom(item) {
      this.editing = item
    },
    filterFun(kw, item = null) {
      this.filterWord = kw
      switch (kw) {
        case 'all':
          this.rightTile = '所有'
          break
        case 'today':
          this.rightTile = '今天'
          break
        case 'week':
          this.rightTile = '最近7天'
          break
        case 'group':
          this.rightTile = item.gname
          this.selectGroupId = item.id
          break
      }
    },
    searchFun() {
      this.keyword = this.keyword.trim()
    },
    clearComputed() {
      this.todoList = this.todoList.filter((item) => !item.complated)
    },
    toggleComputed() {
      this.isShowComputed = !this.isShowComputed
    },
    addTodo() {
      let obj = {
        id: this.autoId++,
        complated: false,
        level: 1,
        content: this.newTodo,
        date: getTodayDate(),
        group: this.selectGroupId,
      }
      this.todoList.push(obj)
      this.newTodo = ''
    },

    updateLevel(item) {
      let index = this.todoList.findIndex((v) => v.id === item.id)
      this.todoList[index].level = item.level
    },
    updateStatus(item) {
      item.complated = !item.complated
    },
    getLevelColor(level) {
      return {
        'border-color':
          level == '1' ? 'red' : level == '2' ? 'yellow' : 'green',
      }
    },
    del(index) {
      this.todoList.splice(index, 1)
    },
  },
}
</script>

<style scoped>
.right-footer {
  bottom: 0;
  width: 95%;
  height: 50px;
  background: #1c1c1e;
}
.dui {
  cursor: pointer;
  /*  禁止选中文字*/
  -webkit-user-select: none;
  user-select: none;
}
.right-footer span {
  font-size: 30px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-left: 10px;
  margin-top: 10px;
  color: #fff;
  cursor: pointer;
}
.right-footer input {
  font-size: 20px;
  line-height: 80px;
  width: 80%;
  height: 80%;
  margin: 10px 5%;
  border: none;
  border-radius: 10px;
  padding: 0;
  color: #fff;
  background-color: #1c1c1e;
}
.libg {
  background: #666 !important;
}
.right-footer input:focus {
  outline: none;
}
.row-action {
  position: absolute;
  top: 10px;
  right: 10px;
}
.row-action button {
  width: 50px;
  height: 30px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 10px;
  margin-left: 20px;
  cursor: pointer;
}
.row-action button:hover {
  background: #666;
}
.row-action select {
  text-align: center;
  width: 70px;
  height: 30px;
  border: none;
  background: #1c1c1e;
  color: #fff;
}
.row-date {
  position: absolute;
  top: 40px;
}
.row-con {
  display: block;
  width: 70%;
  float: left;
  margin-left: 40px;
  line-height: 20px;
  border: none;
  color: #fff;
  background: #1c1c1e;
  padding: 10px;
  position: absolute;
  top: 10px;
}
.row-con:focus {
  outline: none;
}
.dui {
  border: 1px solid #999999;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  float: left;
  position: absolute;
  left: 10px;
  top: 20px;
}
.list-row {
  position: relative;
  width: 100%;
  height: 80px;
  background: #1c1c1e;
  color: #fff;
  line-height: 50px;
  text-align: left;
  padding-left: 10px;
  margin-top: 10px;
}
.right-list {
  padding: 10px;
  width: 96%;
  height: 550px;
  overflow-x: hidden;
  overflow-y: auto;
}
/*滚动条样式 滚动条的颜色，背景色，边框*/
.right-list::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: wheat;
}
.right-header {
  height: 50px;
}
.right-header h2 {
  color: #fff;
  width: 65%;
  text-align: left;
  padding-left: 10px;
  float: left;
}
.right-header button {
  width: 100px;
  height: 30px;
  float: right;
  margin-right: 10px;
  margin-top: 15px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 5px 10px;
  cursor: pointer;
}
.right-header button:active {
  background: #666;
}
.new-list {
  position: absolute;
  bottom: 30px;
  cursor: pointer;
}
.grop-ul {
  height: 67%;
  position: relative;
}
.num {
  float: right;
  margin-right: 10px;
}
.filter-text {
  padding-left: 15px;
  border-left: 2px solid #1592fd;
}
.filter-ul,
.grop-ul {
  width: 93%;
  list-style: none;
  padding: 0;
  margin: 0;
  margin: auto;
  border-bottom: 1px solid #333335;
  padding-bottom: 10px;
}

.filter-ul li,
.grop-ul li {
  cursor: pointer;
  width: 100%;
  height: 30px;
  background: #1c1c1e;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  color: #fff;
  line-height: 30px;
  text-align: left;
  padding-left: 10px;
  margin-top: 10px;
}
.filter-ul li:hover,
.grop-ul li:hover {
  background: #333;
}
.filter-ul li:active {
  background: #666;
}

.search {
  width: 100%;
  height: 50px;
  background: #1c1c1e;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  margin-top: 20px;
}
.search input {
  width: 90%;
  height: 30px;
  margin: 10px 5%;
  border: none;
  border-radius: 10px;
  background: #333;
  color: #fff;
  padding: 0 10px;
}

.container {
  width: 80%;
  height: 700px;
  border-radius: 20px;

  background: #ccc;
  margin: auto;
}
.left-box {
  width: 30%;
  height: 100%;
  background: #1c1c1e;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  float: left;
}
.right-box {
  padding-left: 10px;
  width: 69%;
  height: 100%;
  background: #16161a;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  float: left;
}
.del {
  text-decoration: line-through;
  color: #999;
}
/* 定义滚动条的总体样式 */
div::-webkit-scrollbar {
  width: 10px; /* 滚动条宽度 */
}

/* 定义滚动条轨道的样式 */
div::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 轨道颜色 */
  border-radius: 5px; /* 轨道圆角 */
}

/* 定义滑块的样式 */
div::-webkit-scrollbar-thumb {
  background-color: #888; /* 滑块颜色 */
  border-radius: 5px; /* 滑块圆角 */
}

/* 当鼠标悬停在滑块上时改变滑块的颜色 */
div::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* 悬停时滑块颜色 */
}
</style>
